<template>
  <view class="page-body">
    <view class="search-conditions">
      <!-- 门店编码选择 -->
      <view class="condition-row">
        <text class="condition-label">门店编码:</text>
        <view class="select-wrapper">
          <input 
            v-model="orgCode" 
            placeholder="请选择门店" 
            class="orgcode-input"
            @click="toggleShopDropdown"
            readonly
          />
          <text class="dropdown-arrow" @click="toggleShopDropdown">▼</text>
          <view class="dropdown-menu" v-if="showShopDropdown">
            <view class="dropdown-search">
              <input 
                v-model="shopSearchText" 
                placeholder="搜索门店..." 
                @input="filterShops"
                class="search-input"
              />
            </view>
            <scroll-view class="dropdown-list" scroll-y>
              <view 
                v-for="(shop, index) in filteredShops" 
                :key="index"
                class="dropdown-item"
                @click="selectShop(shop)"
              >
                {{ shop.orgcode }} - {{ shop.orgname }}
              </view>
              <view v-if="filteredShops.length === 0" class="no-data">
                {{ shops.length === 0 ? '加载中...' : '暂无数据' }}
              </view>
            </scroll-view>
          </view>
        </view>
      </view>

      <!-- 日期范围选择 -->
      <view class="condition-rowb">
        <text class="condition-label">日期范围:</text>
        <picker mode="date" :value="startDate" @change="onStartDateChange" class="date-picker">
          <view class="picker-text">{{ startDate }}</view>
        </picker>
        <text class="date-separator">至</text>
        <picker mode="date" :value="endDate" @change="onEndDateChange" class="date-picker">
          <view class="picker-text">{{ endDate }}</view>
        </picker>
      </view>

      <!-- 供应商编码输入 -->
      <view class="condition-rowc">
        <text class="condition-label">供应商编码:</text>
        <view class="select-wrapper">
          <input 
            v-model="supCode" 
            placeholder="请选择供应商" 
            class="orgcode-input"
            @click="toggleSupplierDropdown"
            readonly
          />
          <text class="dropdown-arrow" @click="toggleSupplierDropdown">▼</text>
          <view class="dropdown-menu" v-if="showSupplierDropdown">
            <view class="dropdown-search">
              <input 
                v-model="supplierSearchText" 
                placeholder="搜索供应商..." 
                @input="filterSuppliers"
                class="search-input"
              />
            </view>
            <scroll-view class="dropdown-list" scroll-y>
              <view 
                v-for="(supplier, index) in filteredSuppliers" 
                :key="index"
                class="dropdown-item"
                @click="selectSupplier(supplier)"
              >
                {{ supplier.supcode }} - {{ supplier.supname }}
              </view>
              <view v-if="filteredSuppliers.length === 0" class="no-data">
                {{ suppliers.length === 0 ? '加载中...' : '暂无数据' }}
              </view>
            </scroll-view>
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="soua">
        <button type="primary" @click="fetchData" class="chaxun">
          <text class="chazi">搜索</text>
        </button>
        <button type="default" @click="toggleFilters" class="chaxun">
          <text class="chazi">{{ showFilters ? '隐藏' : '高级' }}</text>
        </button>
        <button type="default" @click="exportToExcel" class="chaxun">
          <text class="chazi">导出Excel</text>
        </button>
      </view>
    </view>

    <!-- 点击外部关闭下拉菜单的遮罩 -->
    <view 
      class="dropdown-mask" 
      v-if="showShopDropdown || showSupplierDropdown" 
      @click="closeAllDropdowns"
    ></view>

    <view class="search-bara">
      <input 
        placeholder="输入搜索内容" 
        class="shuru" 
        v-model="searchText"
        @input="handleSearch"
      />
    </view>

    <!-- 高级筛选区域 -->
    <view class="filter-area" v-if="showFilters">
      <view class="filter-row">
        <picker 
          mode="selector" 
          :range="filterColumns" 
          range-key="label"
          @change="onFilterColumnChange"
        >
          <view class="filter-item">选择筛选列: {{ selectedFilterColumn.label }}</view>
        </picker>
        <input 
          class="filter-input" 
          v-model="filterValue" 
          placeholder="输入筛选值"
          @confirm="applyFilter"
        />
        <button type="default" @click="applyFilter" class="filter-btn">应用</button>
        <button type="default" @click="resetFilters" class="filter-btn">重置</button>
      </view>
      <view class="active-filters" v-if="activeFilters.length > 0">
        <text class="filter-tag" v-for="(filter, index) in activeFilters" :key="index">
          {{ getColumnLabel(filter.column) }}: {{ filter.value }}
          <text class="remove-filter" @click="removeFilter(index)">×</text>
        </text>
      </view>
    </view>

    <view class="biao">
      <view class="table-container">
        <!-- 合并表头和内容到一个滚动容器 -->
        <scroll-view class="table-scroll" scroll-y scroll-x @scroll="handleScroll">
          <table class="data-table">
            <thead>
              <tr>
                <th
                  v-for="(column, index) in columns"
                  :key="index"
                  :style="{ width: column.width + 'px' }"
                  @mousedown="startResize(index, $event)"
                  @click="sortBy(column.key)"
                >
                  <div class="header-content">
                    {{ column.label }}
                    <span v-if="sortKey === column.key">
                      {{ sortOrder === 1 ? '↑' : '↓' }}
                    </span>
                  </div>
                  <div
                    class="resize-handle"
                    @mousedown.stop="startResize(index, $event)"
                  ></div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, rowIndex) in paginatedItems" :key="rowIndex">
                <td
                  v-for="(column, colIndex) in columns"
                  :key="colIndex"
                  :style="{ width: column.width + 'px' }"
                >
                  {{ item[column.key] }}
                </td>
              </tr>
            </tbody>
          </table>
        </scroll-view>
      </view>
    </view>

    <!-- 分页控件 -->
    <view class="pagination-container">
      <view class="pagination">
        <span class="total">共 {{ filteredItems.length }} 条</span>
		 <picker 
		       class="page-size-picker"
		       mode="selector" 
		       :range="pageSizeOptions" 
		       range-key="toString()"
		       @change="(e) => changePageSize(pageSizeOptions[e.detail.value])"
		     >
		       <view class="picker-text">{{ selectedPageSize }}条/页</view>
		     </picker>
        <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
        <template v-for="(page, index) in visiblePages" :key="index">
          <button
            v-if="page !== '...'"
            @click="goToPage(page)"
            :class="{ active: currentPage === page }"
          >
            {{ page }}
          </button>
          <span v-else class="ellipsis">...</span>
        </template>
        <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
      </view>
    </view>
  </view>
</template>

<script>
import axios from 'axios';
import * as XLSX from 'xlsx';

export default {
  data() {
    // 获取当前日期和一个月前的日期作为默认值
    const today = new Date();
    const oneMonthAgo = new Date();
    oneMonthAgo.setMonth(today.getMonth() - 1);
    
    const formatDate = (date) => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    };
    
    return {
      // 门店选择相关
      showShopDropdown: false,
      shopSearchText: '',
      shops: [],
      filteredShops: [],
      
      // 供应商选择相关
      showSupplierDropdown: false,
      supplierSearchText: '',
      suppliers: [],
      filteredSuppliers: [],
      
      // 日期范围选择
      startDate: formatDate(oneMonthAgo),
      endDate: formatDate(today),
      orgCode: '001', // 默认门店编码
      supCode: '2001', // 默认供应商编码
      
      pageSizeOptions: [10, 50, 100, 200],
      selectedPageSize: 50,
      
      items: [],
      originalItems: [], // 保存原始数据
      searchText: '', // 搜索文本
      showFilters: false, // 是否显示高级筛选
      filterColumns: [
        { key: 'orgcode', label: '门店编码' },
        { key: 'orgname', label: '门店名称' },
        { key: 'plucode', label: '商品编码' },
        { key: 'pluname', label: '商品名称' },
        { key: 'barcode', label: '条形码' },
        { key: 'unit', label: '单位' },
        { key: 'specification', label: '规格' },
        { key: 'supcode', label: '供应商编码' },
        { key: 'supname', label: '供应商名称' },
      ],
      selectedFilterColumn: { key: 'pluname', label: '商品名称' }, // 默认筛选列
      filterValue: '', // 筛选值
      activeFilters: [], // 当前应用的筛选条件
      
      // 表格相关数据
      columns: [
        { key: 'orgcode', label: '门店编码', width: 70 },
        { key: 'orgname', label: '门店名称', width: 100 },
        { key: 'plucode', label: '商品编码', width: 100 },
        { key: 'pluname', label: '商品名称', width: 200 },
        { key: 'barcode', label: '条形码', width: 120 },
        { key: 'unit', label: '单位', width: 40 },
        { key: 'spec', label: '规格', width: 40 },
        { key: 'counts', label: '销售数量', width: 100 },
        { key: 'amount', label: '销售金额', width: 100 },
      ],
      sortKey: '',
      sortOrder: 1,
      resizing: false,
      resizeColumnIndex: null,
      startX: 0,
      startWidth: 0,
      currentPage: 1,
    };
  },
  computed: {
    // 应用搜索和筛选后的数据
    filteredItems() {
      let result = [...this.originalItems];
      
      // 应用全局搜索
      if (this.searchText) {
        const searchText = this.searchText.toLowerCase();
        result = result.filter(item => {
          return Object.keys(item).some(key => {
            const value = item[key];
            return value && value.toString().toLowerCase().includes(searchText);
          });
        });
      }
      
      // 应用高级筛选
      if (this.activeFilters.length > 0) {
        result = result.filter(item => {
          return this.activeFilters.every(filter => {
            const itemValue = item[filter.column];
            return itemValue && itemValue.toString().toLowerCase().includes(filter.value);
          });
        });
      }
      
      return result;
    },
    
    // 排序后的数据
    sortedItems() {
      if (!this.sortKey) return this.filteredItems;
      return this.filteredItems.slice().sort((a, b) => {
        if (a[this.sortKey] < b[this.sortKey]) return -1 * this.sortOrder;
        if (a[this.sortKey] > b[this.sortKey]) return 1 * this.sortOrder;
        return 0;
      });
    },
    
    // 分页数据
    paginatedItems() {
      const start = (this.currentPage - 1) * this.selectedPageSize;
      const end = start + this.selectedPageSize;
      return this.sortedItems.slice(start, end);
    },
    
    // 总页数
    totalPages() {
      return Math.ceil(this.filteredItems.length / this.selectedPageSize);
    },
    
    // 可见页码
    visiblePages() {
      const pages = [];
      const maxVisible = 7; // 最多显示7个页码
      
      if (this.totalPages <= maxVisible) {
        // 如果总页数少于等于7，显示所有页码
        for (let i = 1; i <= this.totalPages; i++) {
          pages.push(i);
        }
      } else {
        // 当前页在左侧
        if (this.currentPage <= 4) {
          for (let i = 1; i <= 5; i++) {
            pages.push(i);
          }
          pages.push('...');
          pages.push(this.totalPages);
        } 
        // 当前页在中间
        else if (this.currentPage > 4 && this.currentPage < this.totalPages - 3) {
          pages.push(1);
          pages.push('...');
          for (let i = this.currentPage - 1; i <= this.currentPage + 1; i++) {
            pages.push(i);
          }
          pages.push('...');
          pages.push(this.totalPages);
        } 
        // 当前页在右侧
        else {
          pages.push(1);
          pages.push('...');
          for (let i = this.totalPages - 4; i <= this.totalPages; i++) {
            pages.push(i);
          }
        }
      }
      
      return pages;
    }
  },
  methods: {
    // 门店选择相关方法
    toggleShopDropdown() {
      this.showShopDropdown = !this.showShopDropdown;
      if (this.showShopDropdown && this.shops.length === 0) {
        this.fetchShops();
      }
    },
    
    async fetchShops() {
      const requestData = {
        parameter: {
          appid: "5740027399",
          jkname: "scm_shop",
          dotype: "select",
        }
      };

      try {
        uni.showLoading({ title: '加载门店数据...' });
        const response = await axios.post('https://dzmr.top/ConvertData', requestData);
        
        if (response.data.code === 1) {
          this.shops = response.data.data;
          this.filteredShops = [...this.shops];
        } else {
          throw new Error(response.data.data || '获取门店数据失败');
        }
      } catch (error) {
        uni.showToast({
          title: error.message,
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },

    filterShops() {
      if (!this.shopSearchText) {
        this.filteredShops = [...this.shops];
        return;
      }
      const searchText = this.shopSearchText.toLowerCase();
      this.filteredShops = this.shops.filter(shop => {
        return (
          (shop.orgcode && shop.orgcode.toLowerCase().includes(searchText)) ||
          (shop.orgname && shop.orgname.toLowerCase().includes(searchText))
        );
      });
    },

    selectShop(shop) {
      this.orgCode = shop.orgcode;
      this.showShopDropdown = false;
      this.shopSearchText = '';
    },

    // 供应商选择相关方法
    toggleSupplierDropdown() {
      this.showSupplierDropdown = !this.showSupplierDropdown;
      if (this.showSupplierDropdown && this.suppliers.length === 0) {
        this.fetchSuppliers();
      }
    },
    
    async fetchSuppliers() {
      const requestData = {
        parameter: {
          appid: "5740027399",
          jkname: "scm_supplier",
          dotype: "select",
        }
      };

      try {
        uni.showLoading({ title: '加载供应商数据...' });
        const response = await axios.post('https://dzmr.top/ConvertData', requestData);
        
        if (response.data.code === 1) {
          this.suppliers = response.data.data;
          this.filteredSuppliers = [...this.suppliers];
        } else {
          throw new Error(response.data.data || '获取供应商数据失败');
        }
      } catch (error) {
        uni.showToast({
          title: error.message,
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },

    filterSuppliers() {
      if (!this.supplierSearchText) {
        this.filteredSuppliers = [...this.suppliers];
        return;
      }
      const searchText = this.supplierSearchText.toLowerCase();
      this.filteredSuppliers = this.suppliers.filter(supplier => {
        return (
          (supplier.supcode && supplier.supcode.toLowerCase().includes(searchText)) ||
          (supplier.supname && supplier.supname.toLowerCase().includes(searchText))
        );
      });
    },

    selectSupplier(supplier) {
      this.supCode = supplier.supcode;
      this.showSupplierDropdown = false;
      this.supplierSearchText = '';
    },

    closeAllDropdowns() {
      this.showShopDropdown = false;
      this.showSupplierDropdown = false;
    },

    // 日期选择变化处理
    onStartDateChange(e) {
      this.startDate = e.detail.value;
    },
    
    onEndDateChange(e) {
      this.endDate = e.detail.value;
    },
    
    changePageSize(size) {
      this.selectedPageSize = size;
      this.currentPage = 1; // 重置到第一页
    },
    
    // 获取列标签
    getColumnLabel(key) {
      const column = this.columns.find(col => col.key === key) || 
                    this.filterColumns.find(col => col.key === key);
      return column ? column.label : key;
    },
    
    // 切换高级筛选显示
    toggleFilters() {
      this.showFilters = !this.showFilters;
    },
    
    // 处理搜索输入
    handleSearch() {
      this.currentPage = 1;
    },
    
    // 切换筛选列
    onFilterColumnChange(e) {
      this.selectedFilterColumn = this.filterColumns[e.detail.value];
    },
    
    // 应用筛选
    applyFilter() {
      if (!this.filterValue) {
        uni.showToast({
          title: '请输入筛选值',
          icon: 'none'
        });
        return;
      }
      
      const newFilter = {
        column: this.selectedFilterColumn.key,
        value: this.filterValue.toLowerCase()
      };
      
      // 检查是否已存在相同列的筛选
      const existingIndex = this.activeFilters.findIndex(
        f => f.column === newFilter.column
      );
      
      if (existingIndex >= 0) {
        this.activeFilters[existingIndex] = newFilter;
      } else {
        this.activeFilters.push(newFilter);
      }
      
      this.filterValue = '';
      this.currentPage = 1;
    },
    
    // 移除单个筛选条件
    removeFilter(index) {
      this.activeFilters.splice(index, 1);
      this.currentPage = 1;
    },
    
    // 重置所有筛选
    resetFilters() {
      this.searchText = '';
      this.filterValue = '';
      this.activeFilters = [];
      this.currentPage = 1;
    },
    
    // 表格排序
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortOrder *= -1;
      } else {
        this.sortKey = key;
        this.sortOrder = 1;
      }
    },
    
    // 列宽调整相关方法
    startResize(index, event) {
      this.resizing = true;
      this.resizeColumnIndex = index;
      this.startX = event.clientX;
      this.startWidth = this.columns[index].width;

      document.addEventListener('mousemove', this.handleResize);
      document.addEventListener('mouseup', this.stopResize);
    },
    
    handleResize(event) {
      if (this.resizing) {
        const deltaX = event.clientX - this.startX;
        const newWidth = this.startWidth + deltaX;
        if (newWidth > 50) {
          this.columns[this.resizeColumnIndex].width = newWidth;
          // 同步更新表头和内容表格的列宽
          const headerCols = document.querySelectorAll('.header-table th');
          const bodyCols = document.querySelectorAll('.body-table td');
          if (headerCols[this.resizeColumnIndex] && bodyCols[this.resizeColumnIndex]) {
            headerCols[this.resizeColumnIndex].style.width = newWidth + 'px';
            bodyCols[this.resizeColumnIndex].style.width = newWidth + 'px';
          }
        }
      }
    },
    
    stopResize() {
      this.resizing = false;
      document.removeEventListener('mousemove', this.handleResize);
      document.removeEventListener('mouseup', this.stopResize);
    },
    
    // 同步滚动
    syncScroll(event) {
      const headerTable = document.querySelector('.header-table');
      if (headerTable) {
        headerTable.scrollLeft = event.target.scrollLeft;
      }
    },
    
    // 获取数据
    async fetchData() {
      const requestData = {
        parameter: {
          appid: "5740027399",
          jkname: "salesum",
          dotype: "select",
          where: {
            bgndate: this.startDate,
            enddate: this.endDate,
            orgcode: this.orgCode,
            supcode: this.supCode
          }
        }
      };

      try {
        uni.showLoading({
          title: '加载中...'
        });
        
        const response = await axios.post('https://dzmr.top/ConvertData', requestData);
        const { code, data } = response.data;

        if (code === 1) {
          this.items = data;
          this.originalItems = [...data]; // 保存原始数据
          this.currentPage = 1;
          uni.showToast({
            title: '数据加载成功',
            icon: 'success'
          });
        } else {
          console.error('请求失败:', data);
          uni.showToast({
            title: `请求失败: ${data}`,
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('接口调用出错:', error);
        uni.showToast({
          title: '接口调用出错，请稍后重试',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },
    
    // 分页相关方法
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    
    goToPage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page;
      }
    },
    
    // 导出Excel
    exportToExcel() {
      if (this.filteredItems.length === 0) {
        uni.showToast({
          title: '没有数据可导出',
          icon: 'none'
        });
        return;
      }
      
      // 准备导出数据
      const exportData = this.filteredItems.map(item => {
        return {
          '门店编码': item.orgcode,
          '门店名称': item.orgname,
          '商品编码': item.plucode,
          '商品名称': item.pluname,
          '条形码': item.barcode,
          '单位': item.unit,
          '规格': item.spec,
          '销售数量': item.counts,
          '销售金额': item.amount,
        };
      });
      
      // 创建工作表
      const ws = XLSX.utils.json_to_sheet(exportData);
      
      // 创建工作簿
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "商品数据");
      
      // 生成Excel文件并下载
      const date = new Date();
      const filename = `商品数据_${date.getFullYear()}${(date.getMonth()+1).toString().padStart(2, '0')}${date.getDate().toString().padStart(2, '0')}.xlsx`;
      XLSX.writeFile(wb, filename);
    }
  },
  mounted() {
    this.fetchData();
    this.fetchSuppliers(); // 预加载供应商数据
  }
};
</script>

<style>
/* 门店选择样式 */
.select-wrapper {
  position: relative;
  display: inline-block;
  width: 140px;
}

.orgcode-input {
  width: 100px;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 14px;
  background-color: #fff;
}

.dropdown-arrow {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #999;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  max-height: 400px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-top: 5px;
}

.dropdown-search {
  padding: 8px;
  border-bottom: 1px solid #eee;
}

.search-input {
  width: 200px;
  height: 32px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0 10px;
}

.dropdown-list {
  max-height: 300px;
}

.dropdown-item {
  padding: 8px 15px;
  border-bottom: 1px solid #f5f5f5;
  font-size: 14px;
}

.dropdown-item:active {
  background-color: #f5f5f5;
}

.no-data {
  padding: 15px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

.dropdown-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

/* 原有样式 */
.page-body {
  padding: 0 20px 20px 20px;
  display: flex;
  flex-direction: column;
  height: 1400rpx;
}

.search-conditions {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
}

.condition-row {
  width: 240px;
  display: flex;
  align-items: center;
  margin: 0 10px 0 0;
}

.condition-rowb {
  width: 500px;
  display: flex;
  align-items: center;
  margin: 0 10px 0 0;
}

.condition-rowc {
  width: 260px;
  display: flex;
  align-items: center;
  margin: 0px 10px 0px 0;
}

.condition-label {
  width: 80px;
  font-size: 14px;
  color: #606266;
}

.date-picker {
  width: 200px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 5px 10px;
  background-color: #fff;
}

.picker-text {
  font-size: 14px;
}

.date-separator {
  margin: 0 10px;
  color: #606266;
}

.search-bara {
  display: flex;
  margin-bottom: 10px;
  width: 700px;
}

.chaxun {
  width: 80px;
  height: 30px;
  font-size: 14px;
  padding: 0 12px;
  margin-left: 10px;
}

.shuru {
  border: 1px solid rgb(220, 223, 230);
  border-radius: 5px;
  height: 24px;
  width: 300px;
  padding: 0 10px;
}

.biao {
  border: 0.2px solid rgb(220, 223, 230);
  flex-grow: 1;
  overflow: hidden;
}

.table-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.table-scroll {
  width: 100%;
  height: 100%;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table th,
.data-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}

.data-table th {
  background-color: #f2f2f2;
  position: sticky;
  top: 0;
  z-index: 10;
  cursor: pointer;
}

.data-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.data-table tr:hover {
  background-color: #f1f1f1;
}

.header-content {
  display: inline-block;
  max-width: calc(100% - 10px);
}

.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  background-color: transparent;
}

.resize-handle:hover {
  background-color: #ccc;
}

/* 筛选区域样式 */
.filter-area {
  margin: 10px 0;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.filter-item {
  padding: 5px 10px;
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  min-width: 120px;
}

.filter-input {
  flex: 1;
  min-width: 150px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 10px;
}

.filter-btn {
  margin-right: 10px;
  padding: 0 15px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-tag {
  display: inline-block;
  padding: 4px 8px;
  background-color: #e1f5fe;
  border-radius: 4px;
  font-size: 12px;
  color: #0288d1;
}

.remove-filter {
  margin-left: 4px;
  cursor: pointer;
  font-weight: bold;
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.pagination button {
  margin: 0 3px;
  padding: 5px 10px;
  cursor: pointer;
  min-width: 32px;
  height: 32px;
  line-height: 20px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
}

.pagination button.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ellipsis {
  display: inline-block;
  margin: 0 3px;
  width: 32px;
  text-align: center;
}

.total {
  margin-right: 15px;
  color: #666;
  font-size: 14px;
}

.page-size-picker {
  margin-right: 15px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  font-size: 14px;
}

.picker-text {
  color: #606266;
}

.soua {
  display: flex;
  margin: 0px 0 0 0;
}
</style>